<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2024-08-19 22:10:17
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2025-02-21 20:35:41
 * @FilePath: \greencityldzbruoyi-ui\src\views\ldzb\centerMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="centerPanel">
    <map-container
      class="map-container"
      :showquerybtn="false"
      @viewHandle="viewHandle"
      @xzqhChange="xzqhChanged"
      @extentChange="extentChanged"
      @measureWidgetAdded="measureWidgetAdded"
      @measureWidgetRemoved="measureWidgetRemoved"
      @clear="cleared"
      :showxzqh="false"
      :paramObj="paramObj"
    ></map-container>
    <dianzld-detail-dialog ref="dianzldDetailDialog"></dianzld-detail-dialog>
    <qitald-detail-dialog ref="qitaldDetailDialog"></qitald-detail-dialog>
    <roadld-detail-dialog ref="roadldDetailDialog"></roadld-detail-dialog>
    <gusmm-detail-dialog ref="gusmmDetailDialog"></gusmm-detail-dialog>
  </div>
</template>

<script>
import mapContainer from "../../components/Map/mapContainer_center";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import dianzldDetailDialog from "../../components/Map/ldzb/dianzldDetailDialog";
import qitaldDetailDialog from "../../components/Map/ldzb/qitaldDetailDialog";
import roadldDetailDialog from "../../components/Map/ldzb/roadldDetailDialog";
import gusmmDetailDialog from "../../components/Map/ldzb/gusmmDetailDialog";
import { createLayer } from "@/utils/map";
import { mapActions, mapGetters } from "vuex";

export default {
  props: {
      paramObj: { default: () => { } },
    },
  components: {
    mapContainer,
    FeatureLayer,
    createLayer,
    dianzldDetailDialog,
    qitaldDetailDialog,
    roadldDetailDialog,
    gusmmDetailDialog,
  },
  data() {
    return {
      mapview: undefined,
      where: undefined,
      geometry: null,
      mapViewClickHandler: undefined,
      gusmmFeatureLayer: undefined,
      gusmmFeatureLayerView: undefined,
      dianzldFeatureLayer: undefined,
      dianzldFeatureLayerView: undefined,
      qitaldFeatureLayer: undefined,
      qitaldFeatureLayerView: undefined,
      roadldFeatureLayer: undefined,
      roadldFeatureLayerView: undefined,
      xzqhFeatureLayer: undefined,
      xzqhFeatureLayerView: undefined,
      mapViewClickHandler: undefined,
      xzhqwhereClause:undefined,
      reigonFeatureLayer: undefined,
      reigonFeatureLayerView: undefined,
      mapViewClickHandler: undefined,
    };
  },
  computed: { ...mapGetters(["dataScope"]) },
  methods: {
    /**
     * @description: 地图加载完成事件
     * @param {*} value
     * @return {*}
     */
    async viewHandle(value) {
      let _self = this;
      _self.mapview = value;
      _self.xzqhFeatureLayer = createLayer("xzqhlayer");
      _self.gusmmFeatureLayer = createLayer("gusmmlayer", _self.dataScope);
      _self.dianzldFeatureLayer = createLayer("dianzldlayer", _self.dataScope);
      _self.qitaldFeatureLayer = createLayer("qitaldlayer", _self.dataScope);
      _self.roadldFeatureLayer = createLayer("roadldlayer", _self.dataScope);
      _self.reigonFeatureLayer = createLayer("reigonlayer", _self.dataScope);

      //添加业务图层
      _self.mapview.map.addMany([
        _self.qitaldFeatureLayer,
        _self.roadldFeatureLayer,
        _self.gusmmFeatureLayer,
        _self.dianzldFeatureLayer,
        _self.reigonFeatureLayer,
        _self.xzqhFeatureLayer,
      ]);
      // 根据绿地范围图层自动缩放地图显示范围
      _self.reigonFeatureLayer
        .when(() => {
          return _self.reigonFeatureLayer.queryExtent();
        })
        .then((response) => {
          _self.mapview.goTo(response.extent.expand(1));
        });
      // 获取当前图层视图
      _self.gusmmFeatureLayerView = await _self.mapview.whenLayerView(
        _self.gusmmFeatureLayer
      );
      _self.dianzldFeatureLayerView = await _self.mapview.whenLayerView(
        _self.dianzldFeatureLayer
      );
      _self.qitaldFeatureLayerView = await _self.mapview.whenLayerView(
        _self.qitaldFeatureLayer
      );
      _self.roadldFeatureLayerView = await _self.mapview.whenLayerView(
        _self.roadldFeatureLayer
      );
      _self.xzqhFeatureLayerView = await _self.mapview.whenLayerView(
        _self.xzqhFeatureLayer
      );
      _self.reigonFeatureLayerView = await _self.mapview.whenLayerView(
        _self.reigonFeatureLayer
      );
      // 修改默认的高亮颜色
      _self.gusmmFeatureLayerView.highlightOptions =
        window.mapConfig.symbols.highlightOptions;
      _self.dianzldFeatureLayerView.highlightOptions =
        window.mapConfig.symbols.highlightOptions;
      _self.qitaldFeatureLayerView.highlightOptions =
        window.mapConfig.symbols.highlightOptions;
      _self.roadldFeatureLayerView.highlightOptions =
        window.mapConfig.symbols.highlightOptions;
      // 添加click事件，获取点击的屏幕坐标
      _self.mapViewClickHandler = _self.mapview.on("click", _self.mapViewClick);
      console.log(_self.mapViewClickHandler);
    },
    // 根据行政区划自动缩放地图显示范围
    refreshMap() {
      let _self = this;
      console.log("refreshMap");
      // 根据绿地范围图层自动缩放地图显示范围
      _self.xzqhFeatureLayer.definitionExpression =`name like '%${_self.paramObj.xzqh}%'`;
      console.log( `name like '%${_self.paramObj.xzqh}%'`);
      console.log(`${_self.dataScope} and xzqh like '%${_self.paramObj.xzqh}%'`);
      let reigonWhereClause;
      if(_self.dataScope){
        reigonWhereClause =`${_self.dataScope} and xzqh like'%${_self.paramObj.xzqh}%'`;
      }else{
        reigonWhereClause =`xzqh like'%${_self.paramObj.xzqh}%'`;
      };
      _self.reigonFeatureLayer.definitionExpression = reigonWhereClause;
      // _self.reigonFeatureLayerView.filter = {
      //   where: `${_self.reigonFeatureLayer.definitionExpression}+ and xzqh='${_self.paramObj.xzqh}'`,
      // };

      _self.reigonFeatureLayer
        .when(() => {
          return _self.reigonFeatureLayer.queryExtent();
        })
        .then((response) => {
          _self.mapview.goTo(response.extent.expand(1));
        });
    },
    /**
     * @description: 地图点击事件
     * @param {*} event
     * @return {*}
     */
    mapViewClick(event) {
      let _self = this;
      // console.log(event.mapPoint.x, event.mapPoint.y);
      // 调用hitTest方法，传入屏幕坐标查询点击位置的graphics信息
      _self.mapview.hitTest(event).then(function (response) {
        if (response.results.length) {
          let graphic = response.results.filter(function (result) {
            // 获取到的graphic是否属于特定的图层
            console.log(result.graphic.layer);
            return (
              result.graphic.layer === _self.dianzldFeatureLayer ||
              result.graphic.layer === _self.qitaldFeatureLayer ||
              result.graphic.layer === _self.roadldFeatureLayer ||
              result.graphic.layer === _self.gusmmFeatureLayer
            );
          })[0].graphic;
          switch (graphic.layer) {
            case _self.dianzldFeatureLayer:
              _self.showDianldDetail(graphic);
              break;
            case _self.qitaldFeatureLayer:
              _self.showQitaldDetail(graphic);
              break;
            case _self.roadldFeatureLayer:
              _self.showRoadldDetail(graphic);
              break;
            case _self.gusmmFeatureLayer:
              _self.showGusmmDetail(graphic);
              break;
            default:
              _self.showDianzldDetail(graphic);
              break;
          }
        }
      });
    },
    /**
     * @description: 移除测量微件事件
     * @return {*}
     */
    measureWidgetAdded() {
      console.log("measureWidgetAdded");
      this.mapViewClickHandler.remove();
    },

    /**
     * @description: 移除测量微件事件，通过添加测量微件的添加、移除事件，解决地图测量与点击的冲突
     * @return {*}
     */
    measureWidgetRemoved() {
      console.log("measureWidgetRemoved");
      this.mapViewClickHandler.remove();
      this.mapViewClickHandler = this.mapview.on("click", this.mapViewClick);
    },

    /**
     * @description: 显示点状绿地详情
     * @param {*} graphic
     * @return {*}
     */
    showDianldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        // 显示弹框
        this.$refs.dianzldDetailDialog.show(
          _self.mapview,
          _self.dianzldFeatureLayerView,
          feature
        );
      });
    },
    /**
     * @description: 显示其他绿地详情
     * @param {*} graphic
     * @return {*}
     */
    showQitaldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        this.$refs.qitaldDetailDialog.show(
          _self.mapview,
          _self.qitaldFeatureLayerView,
          feature
        );
      });
    },
    /**
     * @description: 显示道路附属绿地详情
     * @param {*} graphic
     * @return {*}
     */
    showRoadldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        // 显示弹框
        this.$refs.roadldDetailDialog.show(
          _self.mapview,
          _self.roadldFeatureLayerView,
          feature
        );
      });
    },
    showGusmmDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        this.$refs.gusmmDetailDialog.show(
          _self.mapview,
          _self.gusmmFeatureLayerView,
          feature
        ); // 显示弹框
      });
    },
    // 行政区划选择事件
    xzqhChanged(value) {
      this.$emit("xzqhChanged", value);
    },
    // 获取绘制的查询空间范围
    extentChanged(value) {
      this.$emit("extentChange", value);
    },
    // 清空重置
    cleared() {
      this.$emit("clear");
    },
  },
};
</script>

<style lang="scss" scoped>
.centerPanel {
  position: relative;
}

.centerPanel,
.map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}

.xzqhPanel {
  position: absolute;
  top: 1vw;
  left: 1vw;
  width: 10vw;
  z-index: 999;
}
</style>
